<template>
  <div class="el-home">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>
          <my-header></my-header>
        </el-header>
        <el-main class="wheel-scroll" ref="wrapper" >
          <my-main class="wheel-item" ref="content" @mousewheel="goWheel"></my-main>
        </el-main>
        <el-footer>
          <my-footer></my-footer>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import MyMain from 'components/main/Main'
  import MyHeader from 'components/header/Header'
  import MyFooter from 'components/footer/Footer'
  import BScroll from 'better-scroll'
  export default {
    name: 'home',
    data () {
      return {
        msg: ''
      }
    },
    components: {
      MyMain,
      MyHeader,
      MyFooter
    },
    methods: {
      goWheel (e) {
        console.log(e.x, e.y)
      }
    },
    mounted () {
      let clientHeight = document.documentElement.clientHeight - 40 - 120
      this.$refs.wrapper.$el.style.height = clientHeight + 'px'
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper.$el, {
          scrollbar: true,
          /* wheel: {
            selectedIndex: 0,
            rotate: 25,
            adjustTime: 400,
            wheelWrapperClass: 'wheel-scroll',
            wheelItemClass: 'wheel-item'
          }, */
          probeType: 3
        })
      })
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-home {
    height: 100%;
    width: 100%;
  }

  .el-main {
    height: 80%;
    display: inline-block;
    overflow: hidden;
  }

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    height: 10%;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
    display: inline-block;
  }

</style>
